Tengo una función asíncrona que funciona solo cuando hago clic en el botón de búsqueda, pero quiero que la función se inicie también si presiono la tecla "enter" en el teclado.
¿Es esto posible con Vanilla Javascript y la función asíncrona?
Hice varios intentos, pero parece que no funciona.
html
<input type="text" id="input-search" placeholder=""><span><button id="search-button">Search</button></span>js
let userName = document.querySelector("#username"); let button = document.querySelector("#search-button"); button.onclick = async function getData() { let username = document.getElementById("input-search").value; axios .get(`https://api.templatewebsite`) .then(async (response) => { let data = await response.data; if (response.status !== 200) { throw new Error(response.status); } else { console.log(data); } }); };Traté de mantener los fragmentos de código cortos para evitar información innecesaria.
Sí, puedes hacerlo así:
let userName = document.querySelector('#username'); let button = document.querySelector('#search-button'); let input = document.querySelector('#input-search') async function getData() { // do some async actions alert('getData called') } button.onclick = getData; input.addEventListener('keyup', function(e){ var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { getData(); } }) <input type="text" id="input-search" placeholder=""><span><button id="search-button">Search</button></span>Tiene dos opciones, la primera es envolverlo en el componente <form> y manejar este código al enviarlo. El segundo es agregar un detector de eventos en la entrada y verificar si ingresa:
userName.addEventListener("keyup", function(event) { if (event.keyCode === 13) { // Magic happens here } }Traté de poner el código sugerido por @Shamloo y traté de adaptarlo a mi código. Lanza un error cuando intenta obtener el valor del campo de entrada, después de la llamada a la API de axios.
Probablemente puse el código en el lugar equivocado, porque arroja un error incluso si el campo de entrada contiene el valor correcto.
me gusta esto:
let input = document.querySelector('#input-search') async function getData(){ document.querySelector('#input-search').value //API CALL with axios axios.get(`https://api.webtemplate{input}`) .then( async response => { let data = await response.data //if the request can't be processed (data is not found) if (response.status !== 200) { throw new Error(response.status); } else { //request works, data is found console.log(data)fuera de la función, en la parte inferior del código
button.onclick = getData; input.addEventListener('keyup', function(e){ var code = (e.keyCode ? e.keyCode : e.which); if(code == 13) { getData(); } })